<div class=" page-title area-col-white detail-page-title">
	<nz-breadcrumb nzSeparator=" ">
		<nz-breadcrumb-item>
			<a (click)="goback()" class="breadcrumb_link">
				<i nz-icon nzType="arrow-left" nzTheme="outline" class="breadcrumb_i"></i>
			</a>
		</nz-breadcrumb-item>
		<nz-breadcrumb-item>
			<span class="head-05 text-col-title">创建层</span>
			<nzi-help [options]="{'title': '新建层后，将会自动帮您生成一个版本。'}"> </nzi-help>
		</nz-breadcrumb-item>
	</nz-breadcrumb>
</div>

<div class="form-fieldset form-horizontal form-align-left mb64">
	<!-- area-col-write -->
	<nzi-form [formName]="layerForm" #layerFormComponent>
		<form nz-form [formGroup]="layerForm">
			<fieldset>
				<nz-form-item>
					<!-- <app-password-valid [paswordForm]="addForm" [selfItem]="'password'"></app-password-valid> -->
					<nz-form-label>层名称<span class="required-icon">*</span></nz-form-label>
					<nz-form-control>
						<input nz-input formControlName="layerName" placeholder="请输入层名称">
						

						<nz-form-explain *ngIf="layerForm.get('layerName').dirty&&layerForm.get('layerName').errors" class="from-help">
							<ng-container *ngIf="layerForm.get('layerName').errors && !layerForm.get('layerName').hasError('duplicated')">
								2-60 个字符，只能以字母或汉字开头， 仅包含字母、汉字、数字、"."、"_"或"-"
							</ng-container>
							<ng-container *ngIf="layerForm.get('layerName').hasError('duplicated')">
							  该名称已存在
							</ng-container>
						  </nz-form-explain>
						  <nz-form-explain *ngIf="!getInvalidMessage('layerName')" class="help-text">
							2-60 个字符，只能以字母或汉字开头， 仅包含字母、汉字、数字、"."、"_"或"-"
						</nz-form-explain>
			  

						
					</nz-form-control>



				</nz-form-item>
				<nz-form-item>
					<nz-form-label>描述</nz-form-label>
					<nz-form-control>
						<textarea nz-input formControlName="description" placeholder="请输入描述信息"></textarea>
						<nz-form-explain class="from-help" >
                最大支持500个英文字母、数字、空格、逗号、句号、中文。
              </nz-form-explain>
					</nz-form-control>
				</nz-form-item>


				<nz-form-item>
					<nz-form-label>运行环境<span class="required-icon">*</span></nz-form-label>
					<nz-form-control>
					  <nz-list style="width: 700px" [nzDataSource]="runtimeList" [nzRenderItem]="item" [nzSize]="'small'"
						[nzGrid]="{gutter: 0, xs: 24, xl: 4 }">
						<ng-template #item let-item>
						  <nz-list-item (click)="runtimeChange(item)" [nzContent]="nzContent">
							<ng-template #nzContent>
							  <nz-card tabindex="1" style="padding: 10px" [ngStyle]="setShadow(item.key)" nzHoverable
								[nzCover]="coverTemplate">
								<nz-card-meta style="text-align: center" nzTitle="{{item.value}}"></nz-card-meta>
							  </nz-card>
							  <ng-template #coverTemplate>
								<svg class="icon icon-runtime" aria-hidden="true">
								  <use [attr.xlink:href]="item.icon"></use>
								</svg>
							  </ng-template>
							</ng-template>
						  </nz-list-item>
						  <div *ngIf="isCodeLoading || (createType === 'template' && runtime !== item.key)"
							style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;cursor: not-allowed;z-index: 9999;">
						  </div>
						</ng-template>
					  </nz-list>
					  <nz-form-explain class="from-help" [ngStyle] = "{color:(this.isTagList==false?'#cc3a21':'rgba(0, 0, 0, 0.45)')}">
						运行环境可以多选，最多选择5个运行环境
					  </nz-form-explain>
					</nz-form-control>
				  </nz-form-item>




				<nz-form-item>
					<nz-form-label>提交方法</nz-form-label>
					<nz-form-control>
						<nz-radio-group formControlName="upload" [(ngModel)]="uploadType"
							(ngModelChange)="uploadTypeChange($event)">
							<label nz-radio-button *ngFor="let object of uploadTypeList"
								[nzValue]="object.value">{{object.label}}</label>
						</nz-radio-group>
					</nz-form-control>
				</nz-form-item>
				<ng-container [ngSwitch]="uploadType">
					<!-- 本地上传 -->
					<ng-container *ngSwitchCase="'upload'">
						<nz-spin [nzSpinning]="isCodeLoading" nzTip="下载代码中...">
							<nz-form-item>
								<nz-form-label>文件<span class="required-icon">*</span></nz-form-label>
								<nz-form-control>
									<input class="file-upload-input"
										[ngStyle]="{'border-color': (isZipFile === false || exceedFileMaxSize ===true) ? '#f04134':'','box-shadow':((isZipFile === false || exceedFileMaxSize ===true) && focusFileInput === true)?'0 0 0 2px rgba(240, 65, 52, 0.2)':''}"
										(focus)="focusFileName()" (blur)="blurFileName()" formControlName="fileName"
										[placeholder]="filePlaceholder" readonly="readonly" nz-input>
									<!-- <input class="file-upload-input" *ngIf="runtime.indexOf('java8') >= 0 "
                      [ngStyle]="{'border-color': ((isZipFile === false && isJarFile === false) || exceedFileMaxSize ===true) ? '#f04134':'','box-shadow':(((isZipFile === false && isJarFile === false) || exceedFileMaxSize ===true) && focusFileInput === true)?'0 0 0 2px rgba(240, 65, 52, 0.2)':''}"
                      (focus)="focusFileName()" (blur)="blurFileName()" formControlName="fileName"
                      [placeholder]="filePlaceholder" readonly="readonly" nz-input> -->
									<button class="file-upload-button" [nzType]="'primary'" (click)="fileInput.click()"
										nz-button>选择</button>
									<span class="file-upload-span">
										<input type="file" #fileInput [accept]="acceptType" (change)="onChange($event)">
									</span>
									<nz-form-explain
										[ngStyle]="{ 'color' : (isZipFile === false || exceedFileMaxSize ===true || getInvalidMessage('fileName')===true) ? '#f04134':'#bababa'}">
										上传文件格式为 zip，大小限制为 {{fileMaxSize}}MB，大于 {{fileMaxSize}}MB 文件请通过对象存储上传
									</nz-form-explain>
									<!-- <nz-form-explain *ngIf="runtime.indexOf('java8') >= 0"
                      [ngStyle]="{ 'color' : ((isZipFile === false && isJarFile === false)|| exceedFileMaxSize ===true || getInvalidMessage('fileName')===true) ? '#f04134':'#bababa'}">
                      上传文件格式为 zip/jar，大小限制为 {{fileMaxSize}}MB，大于 {{fileMaxSize}}MB 文件请通过对象存储上传
                    </nz-form-explain> -->
								</nz-form-control>
							</nz-form-item>
						</nz-spin>
					</ng-container>
					<!-- 从 OSS 上传 -->
					<ng-container *ngSwitchCase="'oss'">
						<nz-form-item>
							<nz-form-label>OSS Bucket<span class="required-icon">*</span></nz-form-label>
							<nz-form-control>
								<nz-select formControlName="ossBucket" [nzShowSearch]="true" nzShowSearch nzPlaceHolder="请选择OSS Bucket"
									[nzLoading]="isLoadingBucket" nzNotFoundContent="没有可用的Bucket" [nzAutoClearSearchValue]="false"
									[(ngModel)]="ossBucket">
									<nz-option *ngFor="let object of ossBucketList" [nzLabel]="object.label" [nzValue]="object.value">
									</nz-option>
								</nz-select>
							</nz-form-control>
						</nz-form-item>
						<nz-form-item>
							<nz-form-label>OSS对象文件<span class="required-icon">*</span></nz-form-label>
							<nz-form-control>
								<input formControlName="ossFile" placeholder="请输入oss对象文件路径，以/开头，以 .zip 结尾"
									(ngModelChange)="ossFileChange($event)" nz-input>
								<nz-form-explain style="margin-left:0;">
									oss对象文件是以 Bucket 根目录（"/"）开始，以 zip 代码文件结尾的完整路径，例如:"/text/demo.zip"
								</nz-form-explain>
								<!-- <nz-form-explain *ngIf="!getInvalidMessage('ossFile')">
                    oss对象文件是以 Bucket 根目录（"/"）开始，以 zip 代码文件结尾的完整路径，例如:"/text/demo.zip"
                  </nz-form-explain> -->
							</nz-form-control>
						</nz-form-item>
					</ng-container>
				</ng-container>

				


			</fieldset>
		</form>
	</nzi-form>
</div>
<div class="footer-form">
	<div class="pull-right">
		<button nz-button nzi-throttle-click nzType="primary" throttleTime="1000" (throttleClick)="submit()">
			<span>提交</span>
		</button>
		<button nz-button nzi-debounce-click debounceTime="1000" (click)="goback()">
			<span>返回</span>
		</button>
	</div>
</div>